<template>
  <div class="equipment-container">
    <div class="out full_h">
      <!-- 工具栏 -->
      <div class="toolbar">
        <div class="search-group">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索接收编号、设备名称..."
            prefix-icon="el-icon-search"
            class="search-input"
            clearable
          ></el-input>
          <el-select v-model="filterStatus" placeholder="状态筛选" clearable>
            <el-option label="完成接收" value="completed"></el-option>
            <el-option label="待接收" value="pending"></el-option>
            <el-option label="接收中" value="processing"></el-option>
          </el-select>
        </div>
          <el-button type="primary"  icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>

      <!-- 表格区域 -->
      <div style="height: calc(100% - 82px); box-sizing: border-box" class="table-container">
        <div class="table-header">
          <div class="table-title">
            <i class="el-icon-document"></i>
            <span>维修记录列表</span>
          </div>
          <div class="table-actions">
            <!-- <el-button icon="el-icon-download">导出数据</el-button> -->
            <el-button icon="el-icon-refresh">刷新</el-button>
              <el-button  icon="el-icon-plus" @click="handleAddRepair">新增维修</el-button>
          </div>
        </div>

        <div
          class="table-area"
          style="overflow-y:hidden;height: calc(100% - 82px - 75px);box-sizing: border-box;padding: 15px;
}"
        >
          <el-table
            :data="[...deviceRepairList,...deviceRepairList,...deviceRepairList,...deviceRepairList,...deviceRepairList,...deviceRepairList, ...deviceRepairList, ...deviceRepairList, ...deviceRepairList]"
            stripe
            style="width: 100%"
            height="100%"
          >
            <el-table-column prop="repairNo" align="center" label="维修单号"></el-table-column>
            <el-table-column
              prop="groupEquipmentCardNo"
              width="100px"
              align="center"
              label="集团设备卡编号"
            ></el-table-column>
            <el-table-column prop="equipmentId" label="设备标识" align="center"></el-table-column>
            <el-table-column prop="applyGroup" label="申报班组" align="center"></el-table-column>
            <el-table-column prop="groupLeader" width="100px" label="班组负责人" align="center"></el-table-column>
            <el-table-column prop="applyTime" label="申报时间" align="center"></el-table-column>
            <el-table-column prop="repairLeader" width="100px" label="维修负责人" align="center"></el-table-column>
            <el-table-column prop="status" width="100px" label="状态" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" class="look-btn-pre">查看</el-button>
                <el-button
                  type="text"
                  size="small"
                  class="edit-btn-pre"
                  @click="handleEditRepair"
                >编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
          <div
            class="pagination-info"
          >共 {{ pageOb.total }} 条记录，{{ Math.ceil(pageOb.total / pageOb.pageSize) }} 页</div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageOb.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageOb.pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="pageOb.total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="currMode > 0 ? '编辑设备信息' : '新增设备信息'"
      :visible.sync="isEditDialog"
      width="70%"
      :before-close="handleEditClose"
    >
      <el-tabs v-model="activeTab" @tab-click="tabClick">
        <el-tab-pane v-for="(tab) in tabList" :key="tab.id" :label="tab.label" :name="tab.id"></el-tab-pane>
        <!-- <el-tab-pane label="维修详情" name="2"></el-tab-pane> -->
      </el-tabs>
      <div class="edit-main">
        <div class="edit-main-head" style="max-height: calc(80vh - 60px); overflow-y: auto">
          <!-- <div class="edit-tit flex fl-up-down-ct">
            <span class="padd-lt">保修详情</span>
          </div>-->
          <div v-if="activeTab==1" class="out-basic-info padd-up-down-15">
            <div class="basic-info padd-15 bg">
              <el-row>
                <el-form
                  :model="baseForm"
                  status-icon
                  :rules="baseFormRules"
                  ref="baseForm"
                  label-width="150px"
                  class="demo-ruleForm"
                >
                  <el-col :span="12">
                    <el-form-item label="维修单号">
                      <el-input
                        clearable
                        :disabled="notEdit"
                        type="text"
                        v-model="baseForm.repairNo"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <!-- 点击弹出 -->
                  <el-col :span="12">
                    <el-form-item label="集团设备卡编号" prop="groupEquipmentCardNo">
                      <el-input
                        @focus="openDeviceRepairSelect"
                        clearable
                        :disabled="Boolean(currMode)"
                        type="text"
                        v-model="baseForm.groupEquipmentCardNo"
                      ></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="设备标识">
                      <el-input
                        clearable
                        :disabled="notEdit"
                        type="text"
                        v-model="baseForm.equipmentId"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="在用地点">
                      <el-input
                        clearable
                        :disabled="notEdit"
                        type="text"
                        v-model="baseForm.usageLoc"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="生产厂家">
                      <el-input
                        clearable
                        :disabled="Boolean(currMode)"
                        type="text"
                        v-model="baseForm.manuf"
                      ></el-input>
                      <!-- <el-select style="width: 100%;" v-model="baseForm.manuf" placeholder="请选择...">
                        <el-option
                          v-for="item in manufs"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>-->
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="厂家编号" prop="manufNo">
                      <el-input
                        clearable
                        :disabled="Boolean(currMode)"
                        type="text"
                        v-model="baseForm.manufNo"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <!-- 点击弹出 -->
                  <el-col :span="12">
                    <el-form-item label="申报班组" prop="applyGroup">
                      <el-input clearable type="text" v-model="baseForm.applyGroup"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="班组负责人">
                      <el-input
                        clearable
                        :disabled="Boolean(currMode)"
                        type="text"
                        v-model="baseForm.groupLeader"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="故障时间" prop="faultTime">
                      <!-- <el-input
                        clearable
                        :disabled="Boolean(currMode)"
                        type="text"
                        v-model="baseForm.faultTime"
                      ></el-input>-->
                      <el-date-picker
                        style="width: 100%;"
                        v-model="baseForm.faultTime"
                        type="date"
                        placeholder="选择日期"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="申报时间">
                      <el-input
                        clearable
                        :disabled="notEdit"
                        type="text"
                        v-model="baseForm.applyTime"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="20"></el-col>
                  <el-col :span="12">
                    <el-form-item label="故障现象描述">
                      <el-input
                        clearable
                        :disabled="Boolean(currMode)"
                        type="text"
                        v-model="baseForm.faultDesc"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="20"></el-col>
                  <el-col :span="12">
                    <el-form-item label=" 附件">xxxx</el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </div>
          </div>

          <!-- <div class="edit-tit">
            <span class="padd-lt">维修详情</span>
          </div>-->
          <!-- <div v-if="activeTab==2" class="table-container padd-up-down-15 ws flex fl-up-down-ct">
            <span class="padd-rt15">维修部门意见</span>
            <el-input
              style="width: 500px;"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="baseForm.repairDeptOpinion"
            ></el-input>
          </div>-->
          <div v-if="activeTab==2" class="table-container padd-up-down-15 ws flex fl-up-down-ct">
            <el-form
              :model="assignmentForm"
              status-icon
              :rules="assignmentFormRules"
              ref="assignmentForm"
              label-width="150px"
              class="demo-ruleForm"
            >
              <el-form-item label="维修部门意见" prop="repairDeptOpinion">
                <el-input
                  style="width: 500px;"
                   resize="none"
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容指派"
                  v-model="assignmentForm.repairDeptOpinion"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div slot="footer" class="modal-footer flex">
          <el-button size="mini" @click="handleEditClose">取消</el-button>
          <el-button size="mini" @click="handleEditSave" type="primary">保存</el-button>
          <el-button size="mini" @click="handleEditSave" type="primary">保修</el-button>
          <el-button size="mini" @click="handleAssign" type="primary">指派</el-button>
          <el-button size="mini" @click="handleEditSave" type="primary">否决</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      custom-class="main-maint-custom"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="指派"
      :visible.sync="isAssignDialog"
      width="70%"
      :before-close="handleAssignClose"
    >
      <div class="main-maint edit-main">
        <div
          style="max-height: calc(80vh - 150px); overflow-y: auto"
          class="abmain-maint-tle padd-bt15 f1"
        >
          <el-form :model="formTable" ref="ruleFormTable">
            <el-table
              :header-cell-style="{ 'background-color': '#f8f9fa' }"
              :data="formTable.assignTableData"
              style="width: 100%"
            >
              <el-table-column label="成员姓名">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`assignTableData[${scope.$index}].memberName`"
                    :rules="rulesFormTable.memberName"
                  >
                    <el-input
                      @blur="
                        validateField(
                          `assignTableData[${scope.$index}].memberName`
                        )
                      "
                      clearable
                      v-model="scope.row.memberName"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="职务">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`assignTableData[${scope.$index}].position`"
                    :rules="rulesFormTable.position"
                  >
                    <el-select clearable v-model="scope.row.position" placeholder="请选择...">
                      <el-option label="成员" value="成员"></el-option>
                      <el-option label="负责人" value="负责人"></el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button @click="handleDelAssign(scope.$index)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
        <div
          slot="footer"
          style="
            height: 175px;
            padding-top: 15px;
            background: #fff;
            box-sizing: border-box;
            margin: 0 -15px;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
          "
        >
          <div class="flex flex-between fl-up-down-ct padd-lt-rt-15">
            <!-- <el-form-item label="维修部门意见" prop="repairDeptOpinion">
                <el-input
                  resize="none"
                  style="width: 500px;"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入内容"
                  v-model="formTable.repairDeptOpinion"
                ></el-input>
            </el-form-item>-->
            <div class="ws flex fl-up-down-ct">
              <span class="padd-rt15">维修部门意见</span>
              <el-input
                resize="none"
                style="width: 500px;"
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                v-model="formTable.repairDeptOpinion"
              ></el-input>
            </div>
            <el-button class="maint-btn" size="mini" @click="handleAddAssign">+添加维修人员</el-button>
          </div>
          <div class="modal-footer flex" style="margin: 15px 0 0 0">
            <el-button size="mini" @click="handleAssignClose">取消</el-button>
            <el-button size="mini" @click="handleAssignSubmit" type="primary">确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <div v-if="showDeviceSelection" class="modal-overlay">
      <DeviceSelection
        ref="deviceSelector"
        :title="'选择用户'"
        :initialSelected="[]"
        :initial-selected="preSelectedDevices"
        :confirm-button-text="'确认选择'"
        @confirm="handleDeviceConfirm"
        @cancel="showDeviceSelection = false"
        @selection-change="handleSelectionChange"
        @mode-change="handleModeChange"
        @category-change="handleCategoryChange"
      />
    </div>
  </div>
</template>

<script>
import DeviceSelection from "../components/userpts.vue";
export default {
  components: { DeviceSelection },
  data() {
    return {
      // 指派的form
      assignmentForm:{},
      // 规则
      assignmentFormRules:{
         repairDeptOpinion: [
          {
            required: true,
            message: "请填写设备卡编号",
            trigger: ["blur", "change"]
          }
        ],
      },
      // 厂家列表
      manufs: [
        {
          label: "大岭山",
          value: "1"
        },
        {
          label: "高埗",
          value: "2"
        },
        {
          label: "沙田",
          value: "3"
        }
      ],
      baseFormRules: {
        groupEquipmentCardNo: [
          {
            required: true,
            message: "请填写设备卡编号",
            trigger: ["blur", "change"]
          }
        ],
        manufNo: [
          {
            required: true,
            message: "请填写厂家编号",
            trigger: ["blur", "change"]
          }
        ],
        faultTime: [
          {
            required: true,
            message: "请选择故障时间",
            trigger: ["blur", "change"]
          }
        ],
        applyGroup: [
          {
            required: true,
            message: "请选择班组",
            trigger: ["blur", "change"]
          }
        ]
      },
      notEdit: true,
      preSelectedDevices: "",
      showDeviceSelection: false,
      tabList: [
        {
          label: "保修详情",
          id: "1"
        }
      ],
      activeTab: "1",
      currMode: 0,
      isEditDialog: false,
      // 搜素关键字
      searchKeyword: "",
      // 状态筛选
      filterStatus: "",
      // 维修列表
      deviceRepairList: [
        {
          // “维修单号”字段
          repairNo: "WX202311101604",
          // “集团设备卡编号”字段
          groupEquipmentCardNo: "11124",
          // “设备标识”字段
          equipmentId: "演示用设备",
          // “申报班组”字段
          applyGroup: "综合室",
          // “班组负责人”字段
          groupLeader: "",
          // “申报时间”字段
          applyTime: "2023-11-10 16:04:59",
          // “维修负责人”字段
          repairLeader: "陈敏",
          // “状态”字段
          status: "进行中",
          // 基本 在用地点
          usageLoc: "",
          // 生产厂家
          manuf: "",
          // 厂家编号
          manufNo: "",
          // 故障时间
          faultTime: "",
          // 故障现象描述
          faultDesc: "",
          // 附件
          attachments: "",
          // 维修部门意见
          repairDeptOpinion: ""
        },
        {
          repairNo: "WX202310261939",
          groupEquipmentCardNo: "tyu",
          equipmentId: "照明设备ZM-20231008001",
          applyGroup: "综合室",
          groupLeader: "",
          applyTime: "2023-10-26 19:39:59",
          repairLeader: "",
          status: "待指派",
          usageLoc: "",
          manuf: "",
          manufNo: "",
          faultTime: "",
          faultDesc: "",
          attachments: "",
          repairDeptOpinion: ""
        }
      ],
      pageOb: {
        total: 50,
        currentPage: 1,
        pageSize: 10
      },
      baseForm: {},
      statusMapp: {
        1: "运行中",
        2: "维修中",
        3: "待机中",
        4: "关机中"
      },
      ruleFormTable: null,
      isAssignDialog: false,
      formTable: {
        assignTableData: [
          { memberName: "蒋斌超", position: "成员" },
          { memberName: "蒋海迪", position: "负责人" }
        ],
        repairDeptOpinion: ""
      },
      rulesFormTable: {
        memberName: [
          {
            required: true,
            validator: this.validateMaintenanceType,
            trigger: ["blur", "change"]
          }
        ],
        position: [
          {
            required: true,
            validator: this.validateMaintenanceValue,
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  methods: {
    handleCategoryChange(result) {
      console.log("e4", result);
    },
    handleModeChange(result) {
      console.log("e3", result);
    },
    handleSelectionChange(result) {
      console.log("e2", result);
    },
    handleDeviceConfirm(result) {
      console.log("e1", result.users);
      result.users.forEach(v => {
        this.formTable.assignTableData.push(v);
      });
      this.showDeviceSelection = false;
      // this.baseForm.groupEquipmentCardNo = result.devices[0].name;
      // this.showDeviceSelection = false;
    },
    openDeviceRepairSelect() {},
    // 验证器函数移到 methods 中
    validateMaintenanceType(rule, value, callback) {
      if (!value) {
        return callback(new Error("姓名不能为空"));
      }
      // if (value.length < 2 || value.length > 20) {
      //   return callback(new Error('维保类型长度在 2 到 20 个字符'));
      // }
      callback();
    },
    // 验证器函数移到 methods 中
    validateMaintenanceValue(rule, value, callback) {
      if (!value) {
        return callback(new Error("职务不能为空"));
      }
      // if (value.length < 2 || value.length > 20) {
      //   return callback(new Error('维保类型长度在 2 到 20 个字符'));
      // }
      callback();
    },
    handleAddAssign() {
      this.showDeviceSelection = true;
      this.$nextTick(() => {
        const container = document.querySelector(".abmain-maint-tle");
        if (container) {
          container.scrollTo(0, 99999);
        }
      });
      this.ruleFormTable = this.$refs.ruleFormTable;
      this.ruleFormTable.validate(valid => {
        if (valid) {
          // this.formTable.assignTableData.push({
          //   memberName: "",
          //   position: ""
          // });
          console.log("提交表单");
        } else {
          console.log("验证失败");
          return false;
        }
      });
    },
    handleAssign(e) {
      this.isAssignDialog = true;
    },
    tabClick(e) {
      this.activeTab = e._props.name;
    },
    handleSearch() {},
    handleAddRepair() {
      this.currMode = 0;
      this.isEditDialog = true;
    },
    handleEditRepair() {
      this.currMode = 1;
      this.isEditDialog = true;
    },
    handleRepairExport() {},
    handleRepairRefresh() {},
    handleSizeChange() {},
    handleCurrentChange() {},
    handleEditSave() {
      this.$refs.baseForm.validate(valid => {
        if (valid) {
          console.log("请求后端");
          this.$message.success("保存成功");
        } else {
          this.$message.error("请填写完整信息");
        }
      });
    },
    handleEditClose() {
      this.isEditDialog = false;
    },
    handleAssignClose() {
      console.log("close 指派");
      this.isAssignDialog = false;
    },
    handleDelAssign(e) {
      this.formTable.assignTableData.splice(e, 1);
    },
    handleAssignSubmit() {
      this.activeTab = "2";
      this.tabList.push({
        label: "维修详情",
        id: "2"
      });
      this.ruleFormTable = this.$refs.ruleFormTable;
      this.ruleFormTable.validate(valid => {
        if (valid) {
          console.log("提交表单", this.formTable);
          this.baseForm.repairDeptOpinion = this.formTable.repairDeptOpinion;
          this.isAssignDialog = false;
        } else {
          console.log("验证失败");
          return false;
        }
      });
    },
    validateField(e) {
      console.log("验证字段:", e);
    }
  }
};
</script>

<style scoped lang="scss">
.equipment-container {
  height: 100%;
  width: 100%;
  padding: 15px;
  // width: 100%;
  box-sizing: border-box;
}

/* 头部区域 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin-bottom: 24px;
  // padding: 0 8px;
}

.header-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2d3d;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-title i {
  color: #409eff;
  font-size: 28px;
}

/* 搜索和操作区域 */
.toolbar {
  background: white;
  padding: 20px;
  // border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  // margin-bottom: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.search-group {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
  min-width: 300px;
}

.search-input {
  flex: 1;
  max-width: 400px;
}

.filter-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 表格容器 */
.table-container {
  background: white;
  // border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: auto;
  min-height: 0;
}

.table-header {
  padding: 20px 24px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2d3d;
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 自定义表格样式 */
.custom-table {
  border: none;
}

.custom-table .el-table__header {
  // background: #f8f9fa;
}

.custom-table .el-table__header th {
  // background: #f8f9fa;
  color: #606266;
  font-weight: 600;
  border-bottom: 2px solid #eaeaea;
}

.custom-table .el-table__body tr:hover td {
  background: #f5f7fa !important;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-completed {
  background: #f0f9ff;
  color: #1890ff;
  border: 1px solid #d1e9ff;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.view-btn,
.edit-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.view-btn {
  background: #f0f9ff;
  color: #1890ff;
  border: 1px solid #d1e9ff;
}

.view-btn:hover {
  background: #1890ff;
  color: white;
}

.edit-btn {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.edit-btn:hover {
  background: #52c41a;
  color: white;
}

/* 分页区域 */
.pagination-container {
  padding: 20px 24px;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafbfc;
}

.pagination-info {
  color: #606266;
  font-size: 14px;
}

/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  color: #606266;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .equipment-container {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-group {
    min-width: auto;
  }

  .stats-cards {
    grid-template-columns: 1fr;
  }
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}
// 新增
.edit-main {
  padding: 15px 15px 20px;
  box-sizing: border-box;
  max-height: calc(80vh - 35px);
  // border: 1px solid red;
  .edit-tit {
    border-left: 4px solid #1a4b8c;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }
  .basic-info {
    border: 1px solid #ebeef5;
  }
  .edit-main-head {
    // max-height: calc(80vh - 60px);
    // overflow-y:auto
    min-height: 0;
  }
}
.abmain-maint-tle {
  overflow-y: auto;
  box-sizing: border-box;
}
.bg {
  // background-color: #f8f9fa;
}
.modal-footer {
  padding: 15px 20px;
  padding: 25px 15px 0 0;

  // height: 60px;
  // background-color: #f8f9fa;
  justify-content: flex-end;
  // gap: 10px;
  border-top: 1px solid #eaeaea;
  margin: 0 -15px;
  box-sizing: border-box;
}

// 设备列表
.device-list {
  min-height: 200px;
}
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #7f8c8d;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 15px;
  color: #bdc3c7;
}
.card {
  // background: white;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  padding: 15px;
  // margin-bottom: 10px;
  box-sizing: border-box;
  // border-left: 4px solid #3498db;
  animation: fadeIn 0.5s ease;
  min-height: 352px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaeaea;
}

.card-title {
  font-size: 16px;
  color: #2c3e50;
  font-weight: 300;
}
.btn-group {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
.action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.delete-btn {
  background-color: #e74c3c;
  color: white;
}

.delete-btn:hover {
  background-color: #c0392b;
}
.edit-tit {
  border-left: 4px solid #1a4b8c;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
.maint-btn {
  background: none;
  border: 1px dashed #1a4b8c;
  color: #1a4b8c;
  cursor: pointer;
  font-size: 14px;
  padding: 7px 12px;
  border-radius: 4px;
  transition: background 0.2s;
}
</style>